<template>
  <div class="goods-info" @click="goGoodsPage()">
    <div class="goods-image">
      <img v-lazy="goodsImage" width="90%" />
    </div>
    <div class="goods-name">{{goodsName}}</div>
    <div class="goods-price">￥{{goodsPrice | moneyFilter }}</div>
  </div>
</template>

<script>
import { toMoney } from '@/filter/moneyFilter.js'//引入模块moneyFilter.js文件，作用过滤器。
export default {
    props:['goodsImage','goodsName','goodsPrice','goodsId'],
    filters:{
          moneyFilter(money){
               return toMoney(money)
          }
    },
    methods:{
      goGoodsPage(){
          // 编程式路由传值
          this.$router.push({name:'Goods',params:{goodsId:this.goodsId}})//向Goods.vue传id值
          //注意路由传值的坑，如果用name后面就用params,如果是path后面就用query
      }
    }

};
</script>

<style scoped>
 .goods-name{
        padding: 0 8px;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space:nowrap; 
    }
</style>